Next.js API Routes: Bygg din backend med lätthet

Next.js har revolutionerat frontend-utveckling med sina kraftfulla funktioner och intuitiva struktur. Men visste du att det också kan förenkla backend-utveckling avsevärt? Med Next.js API Routes kan du skapa serverlösa API-slutpunkter direkt i din Next.js-applikation, vilket i många fall eliminerar behovet av en separat backend-server. Denna omfattande guide går igenom processen för att bygga en robust och skalbar backend med hjälp av Next.js API Routes.

Vad är Next.js API Routes?

API Routes är serverlösa funktioner som du skapar i din /pages/api-katalog i ditt Next.js-projekt. Dessa funktioner hanterar inkommande HTTP-förfrågningar och returnerar svar, precis som ett traditionellt backend-API. Den stora skillnaden är att de driftsätts som serverlösa funktioner, vilket innebär att du inte behöver hantera servrar eller infrastruktur.

Tänk på dem som lätta, on-demand backend-funktioner som är sömlöst integrerade med din Next.js-frontend.

Fördelar med att använda Next.js API Routes

• Förenklad utveckling: Skriv både din frontend- och backend-kod i samma projekt, med JavaScript eller TypeScript. Inget mer kontextbyte mellan olika projekt och teknologier.
• Serverlös arkitektur: Dra nytta av skalbarheten, tillförlitligheten och kostnadseffektiviteten hos serverlös databehandling. Betala bara för de resurser du förbrukar.
• Enkel driftsättning: Driftsätt hela din applikation (frontend och backend) med ett enda kommando med plattformar som Vercel eller Netlify.
• Inbyggd säkerhet: Next.js och serverlösa plattformar erbjuder inbyggda säkerhetsfunktioner för att skydda dina API-slutpunkter.
• Förbättrad prestanda: API Routes kan driftsättas närmare dina användare, vilket minskar latens och förbättrar prestandan, särskilt fördelaktigt för användare globalt.
• Återanvändbarhet av kod: Dela kod mellan din frontend och backend, vilket minskar kodduplicering och förbättrar underhållbarheten.

Komma igång med Next.js API Routes

Låt oss skapa en enkel API-route som returnerar ett JSON-svar. Se först till att du har ett Next.js-projekt uppsatt. Om inte, skapa ett med:

            npx create-next-app my-app
cd my-app
            

              
                Copy
              
            
          

Skapa nu en fil med namnet hello.js i katalogen /pages/api:

            // pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

            

              
                Copy
              
            
          

Denna kod definierar en enkel API-route som svarar med ett JSON-objekt som innehåller namnet "John Doe". För att komma åt denna API-route, starta din Next.js-utvecklingsserver:

            npm run dev
            

              
                Copy
              
            
          

Öppna sedan din webbläsare och navigera till http://localhost:3000/api/hello. Du bör se följande JSON-svar:

            {"name": "John Doe"}
            

              
                Copy
              
            
          

Förstå API Route Handler

handler-funktionen i din API-route tar emot två argument:

• req: En instans av http.IncomingMessage, som innehåller information om den inkommande förfrågan, såsom anropsmetod, headers och body.
• res: En instans av http.ServerResponse, som låter dig skicka ett svar tillbaka till klienten.

Du kan använda dessa objekt för att hantera olika typer av förfrågningar, läsa data från förfråganskroppen, ställa in svars-headers och skicka olika typer av svar.

Hantera olika HTTP-metoder

Du kan använda egenskapen req.method för att avgöra HTTP-metoden för den inkommande förfrågan och hantera olika metoder därefter. Till exempel:

            // pages/api/method.js
export default function handler(req, res) {
  if (req.method === 'GET') {
    // Hantera GET-förfrågan
    res.status(200).json({ message: 'Detta är en GET-förfrågan' })
  } else if (req.method === 'POST') {
    // Hantera POST-förfrågan
    res.status(200).json({ message: 'Detta är en POST-förfrågan' })
  } else {
    // Hantera andra metoder
    res.status(405).json({ message: 'Metoden är inte tillåten' })
  }
}

            

              
                Copy
              
            
          

I detta exempel hanterar API-routen både GET- och POST-förfrågningar. Om anropsmetoden är GET svarar den med ett JSON-objekt som innehåller meddelandet "Detta är en GET-förfrågan". Om anropsmetoden är POST svarar den med ett JSON-objekt som innehåller meddelandet "Detta är en POST-förfrågan". Om anropsmetoden är något annat svarar den med ett 405 Method Not Allowed-fel.

Läsa data från förfråganskroppen

För POST-, PUT- och PATCH-förfrågningar behöver du ofta läsa data från förfråganskroppen. Next.js har inbyggt stöd för att tolka JSON- och URL-kodade förfråganskroppar. För att tolka en JSON-förfråganskropp kan du använda egenskapen req.body. Till exempel:

            // pages/api/post.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, email } = req.body

    // Bearbeta datan
    console.log('Namn:', name)
    console.log('E-post:', email)

    res.status(200).json({ message: 'Data mottogs framgångsrikt' })
  } else {
    res.status(405).json({ message: 'Metoden är inte tillåten' })
  }
}

            

              
                Copy
              
            
          

För att testa denna API-route kan du använda ett verktyg som Postman eller curl för att skicka en POST-förfrågan med en JSON-kropp:

            curl -X POST -H "Content-Type: application/json" -d '{"name": "Jane Doe", "email": "jane.doe@example.com"}' http://localhost:3000/api/post
            

              
                Copy
              
            
          

Ställa in svars-headers

Du kan använda metoden res.setHeader() för att ställa in svars-headers. Detta är användbart för att ställa in innehållstyp, cache-kontroll och annan viktig information. Till exempel:

            // pages/api/headers.js
export default function handler(req, res) {
  res.setHeader('Content-Type', 'application/json')
  res.setHeader('Cache-Control', 's-maxage=3600')
  res.status(200).json({ message: 'Hej, världen!' })
}

            

              
                Copy
              
            
          

I detta exempel ställer API-routen in Content-Type-headern till application/json, vilket indikerar att svaret är ett JSON-objekt. Den ställer också in Cache-Control-headern till s-maxage=3600, vilket talar om för webbläsaren och CDN att cachelagra svaret i upp till 1 timme.

Felhantering

Det är viktigt att hantera fel på ett elegant sätt i dina API-routes. Du kan använda try-catch-block för att fånga undantag och skicka lämpliga felsvar till klienten. Till exempel:

            // pages/api/error.js
export default async function handler(req, res) {
  try {
    // Simulera ett fel
    throw new Error('Något gick fel')
  } catch (error) {
    console.error(error)
    res.status(500).json({ message: 'Internt serverfel' })
  }
}

            

              
                Copy
              
            
          

I detta exempel simulerar API-routen ett fel genom att kasta ett nytt Error-objekt. Catch-blocket fångar felet, loggar det till konsolen och skickar ett 500 Internal Server Error-svar till klienten. Överväg att använda ett robust loggningssystem som Sentry eller Datadog för produktionsmiljöer.

Ansluta till en databas

Ett av de vanligaste användningsfallen för API-routes är att ansluta till en databas. Next.js API Routes integreras sömlöst med olika databaser, inklusive:

• MongoDB: En populär NoSQL-databas som är väl lämpad för flexibel och ostrukturerad data.
• PostgreSQL: En kraftfull och öppen källkods-relationsdatabas som är känd för sin tillförlitlighet och dataintegritet.
• MySQL: En annan populär öppen källkods-relationsdatabas som används flitigt för webbapplikationer.
• Firebase: En molnbaserad plattform som tillhandahåller en realtidsdatabas och andra tjänster.
• FaunaDB: En serverlös databas som är utformad för globala applikationer.

Här är ett exempel på hur man ansluter till en MongoDB-databas i en Next.js API-route:

            // pages/api/mongodb.js
import { MongoClient } from 'mongodb'

const uri = process.env.MONGODB_URI
const options = {}

let client
let clientPromise

if (!process.env.MONGODB_URI) {
  throw new Error('Vänligen lägg till din Mongo URI i .env.local')
}

if (process.env.NODE_ENV === 'development') {
  // I utvecklingsläge, använd en global variabel så att värdet
  // bevaras över modul-omladdningar orsakade av HMR (Hot Module Replacement).
  if (!global._mongoClientPromise) {
    client = new MongoClient(uri, options)
    global._mongoClientPromise = client.connect()
  }
  clientPromise = global._mongoClientPromise
} else {
  // I produktionsläge är det bäst att inte använda en global variabel.
  client = new MongoClient(uri, options)
  clientPromise = client.connect()
}

// Exportera ett modul-scopat MongoClient-löfte. Genom att göra detta i en
// separat modul kan klienten säkert återanvändas över flera
// funktioner. Se: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb/lib/mongodb.js
export default async function handler(req, res) {
  try {
    const client = await clientPromise
    const db = client.db(process.env.MONGODB_DB)
    const collection = db.collection('users')

    const users = await collection.find({}).toArray()

    res.status(200).json({ users })
  } catch (e) {
    console.error(e)
    res.status(500).json({ message: 'Misslyckades med att hämta användare' })
  }
}

            

              
                Copy
              
            
          

Innan du kör denna kod, se till att du har mongodb-paketet installerat:

            npm install mongodb
            

              
                Copy
              
            
          

Du behöver också ställa in miljövariablerna MONGODB_URI och MONGODB_DB. Dessa variabler bör definieras i din .env.local-fil (eller din värdleverantörs inställningar för miljövariabler för produktion). MONGODB_URI innehåller anslutningssträngen till din MongoDB-databas, och MONGODB_DB specificerar databasnamnet.

Autentisering och auktorisering

Att skydda dina API-routes är avgörande för säkerheten. Next.js API Routes kan säkras med olika autentiserings- och auktoriseringstekniker, inklusive:

• JSON Web Tokens (JWT): En standard för att säkert överföra information mellan parter som ett JSON-objekt.
• API-nycklar: Ett enkelt sätt att begränsa åtkomsten till dina API-slutpunkter.
• OAuth: Ett delegeringsprotokoll som låter användare ge tredjepartsapplikationer åtkomst till sina resurser utan att dela sina inloggningsuppgifter.
• NextAuth.js: En komplett öppen källkods-autentiseringslösning för Next.js-applikationer.

Här är ett exempel på hur man skyddar en API-route med JWT-autentisering:

            // pages/api/protected.js
import jwt from 'jsonwebtoken'

const secret = process.env.JWT_SECRET

export default function handler(req, res) {
  const token = req.headers.authorization?.split(' ')[1]

  if (!token) {
    return res.status(401).json({ message: 'Obehörig' })
  }

  try {
    const decoded = jwt.verify(token, secret)
    // "decoded"-objektet innehåller användarinformationen som är inbäddad i token
    // Till exempel: const userId = decoded.userId;

    // Fortsätt bearbeta förfrågan
    res.status(200).json({ message: 'Skyddad resurs har nåtts framgångsrikt' })
  } catch (error) {
    return res.status(401).json({ message: 'Ogiltig token' })
  }
}

            

              
                Copy
              
            
          

Innan du kör denna kod, se till att du har jsonwebtoken-paketet installerat:

            npm install jsonwebtoken
            

              
                Copy
              
            
          

Du behöver också ställa in miljövariabeln JWT_SECRET. Detta bör vara en stark, slumpmässigt genererad hemlig nyckel som används för att signera och verifiera JWTs. Förvara denna säkert och exponera den aldrig i din klient-sidokod.

Middleware

Även om Next.js inte erbjuder traditionell middleware för API-routes på samma sätt som Express.js, kan du uppnå liknande funktionalitet genom att slå in dina API-route handlers med återanvändbara funktioner. Detta gör att du kan utföra uppgifter som:

• Autentisering: Verifiera användaruppgifter innan du tillåter åtkomst till API-slutpunkter.
• Auktorisering: Kontrollera om en användare har de nödvändiga behörigheterna för att utföra en specifik åtgärd.
• Loggning: Logga inkommande förfrågningar och utgående svar för granskning och felsökning.
• Validering: Validera förfrågningsdata för att säkerställa att den uppfyller specifika kriterier.
• Rate Limiting: Skydda ditt API från missbruk genom att begränsa antalet förfrågningar som en användare kan göra inom en given tidsperiod.

Här är ett exempel på hur man skapar en enkel loggnings-middleware:

            // utils/middleware.js
export function withLogging(handler) {
  return async function(req, res) {
    console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`)
    return handler(req, res)
  }
}

            

              
                Copy
              
            
          

För att använda denna middleware, slå helt enkelt in din API-route handler med withLogging-funktionen:

            // pages/api/logged.js
import { withLogging } from '../../utils/middleware'

async function handler(req, res) {
  res.status(200).json({ message: 'Denna förfrågan loggades' })
}

export default withLogging(handler)

            

              
                Copy
              
            
          

Bästa praxis för att bygga Next.js API Routes

• Håll dina API-routes små och fokuserade. Varje API-route bör hantera en specifik uppgift eller resurs.
• Använd miljövariabler för känslig data. Hårdkoda aldrig hemligheter eller API-nycklar i din kod.
• Validera förfrågningsdata för att förhindra säkerhetssårbarheter. Använd ett bibliotek som Joi eller Yup för att validera förfrågningskroppar.
• Hantera fel elegant och ge informativa felmeddelanden. Använd try-catch-block och logga fel till en central plats.
• Använd cachelagring för att förbättra prestandan. Cachelagra data som används ofta för att minska databasbelastningen.
• Övervaka dina API-routes för prestanda och fel. Använd ett övervakningsverktyg som Sentry eller Datadog för att spåra hälsan hos ditt API.
• Dokumentera dina API-routes med ett verktyg som Swagger eller OpenAPI. Detta gör det lättare för andra utvecklare att använda ditt API.
• Överväg att använda TypeScript för typsäkerhet. TypeScript kan hjälpa dig att fånga fel tidigt och förbättra underhållbarheten av din kod.
• Tänk på internationalisering (i18n) från början. Om din applikation kommer att användas av användare från olika länder, designa dina API-routes för att stödja flera språk och valutor. Till exempel kan API-slutpunkter för e-handel behöva hantera olika skattesatser och fraktkostnader baserat på användarens plats.
• Implementera korrekt CORS (Cross-Origin Resource Sharing)-konfiguration. Detta är avgörande när ditt API nås från en annan domän än din Next.js-applikation. Konfigurera CORS noggrant för att endast tillåta auktoriserade ursprung att komma åt dina API-resurser.

Avancerade tekniker

Bakgrundsjobb

För långvariga uppgifter som inte bör blockera API-svaret, överväg att använda bakgrundsjobb. Du kan använda bibliotek som BullMQ eller Bree för att hantera dina bakgrundsjobb och bearbeta dem asynkront.

WebSockets

För realtidsapplikationer kan du använda WebSockets i dina Next.js API-routes. Bibliotek som Socket.IO och ws gör det enkelt att etablera beständiga anslutningar mellan klienten och servern.

GraphQL

Om du behöver ett mer flexibelt och effektivt sätt att hämta data, överväg att använda GraphQL. Du kan använda bibliotek som Apollo Server eller Yoga för att skapa en GraphQL API-slutpunkt i din Next.js-applikation.

Slutsats

Next.js API Routes erbjuder ett kraftfullt och bekvämt sätt att bygga serverlösa backends direkt i din Next.js-applikation. Genom att utnyttja fördelarna med serverlös arkitektur kan du förenkla utvecklingen, förbättra prestandan och minska kostnaderna. Oavsett om du bygger ett enkelt kontaktformulär eller en komplex e-handelsplattform kan Next.js API Routes hjälpa dig att skapa en robust och skalbar backend med lätthet. Med en solid förståelse för grunderna och tillämpningen av bästa praxis kan du utnyttja detta kraftfulla verktyg för att skapa effektiva, säkra och globalt tillgängliga applikationer.